<template>
	<view class="timecard-container">
		
		
		<!-- Form Container -->
		<view class="form-container">
			<view class="form-card">
				<!-- Replacement Date Field -->
				<view class="form-item">
					<view class="form-label required">
						Replacement date
					</view>
					<view class="form-input-container" @click="showDatePicker">
						<view class="selector">
							<view class="selector-icon">
								<image src="/static/uniapp/duration.png" mode="aspectFit"></image>
							</view>
							<view class="selector-text">
								<text>{{ selectedDate || 'Select Date' }}</text>
							</view>
							<view class="selector-arrow">
								<image src="/static/uniapp/arrow-down.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- Replacement Timecard Type Field -->
				<view class="form-item">
					<view class="form-label required">
						Replacement timecard type
					</view>
					<view class="form-input-container" @click="showTypePicker">
						<view class="selector">
							<view class="selector-icon">
								<image src="/static/uniapp/leave_category.png" mode="aspectFit"></image>
							</view>
							<view class="selector-text">
								<text>{{ selectedType || 'Select Type' }}</text>
							</view>
							<view class="selector-arrow">
								<image src="/static/uniapp/arrow-down.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- Reason Field -->
				<view class="form-item">
					<view class="form-label required">
						Reason for replacement card
					</view>
					<view class="form-input-container">
						<textarea class="reason-input" placeholder="Enter the reason for replacing the card" v-model="reason"></textarea>
					</view>
				</view>
				
				<!-- Picture Upload -->
				<view class="form-item">
					<view class="form-label-with-note">
						<text>Picture</text>
						<text class="note-text required">Upload a maximum of 9 images</text>
					</view>
					<view class="image-uploader">
						<view class="upload-box" @click="chooseImage">
							<text class="upload-icon">+</text>
						</view>
						<view class="image-preview" v-for="(image, index) in uploadedImages" :key="index">
							<image :src="image" mode="aspectFill"></image>
							<view class="delete-image" @click="deleteImage(index)">×</view>
						</view>
					</view>
				</view>
				
				<!-- Approvers Section -->
				<view class="form-item">
					<view class="form-label required">
						Examine and approve
					</view>
					<view class="approver-timeline">
						<!-- Approver Item 1 -->
						<view class="approver-item">
							<view class="timeline-dot"></view>
							<view class="approver-tag">
								<text>Ms. Suer</text>
								<view class="approver-close">×</view>
							</view>
						</view>
						
						<!-- Approver Item 2 -->
						<view class="approver-item">
							<view class="timeline-dot"></view>
							<view class="approver-tag">
								<text>Ms. Suer</text>
								<view class="approver-close">×</view>
							</view>
						</view>
						
						<!-- Add Approver Button -->
						<view class="approver-item">
							<view class="timeline-dot"></view>
							<view class="add-approver" @click="addApprover">
								<text class="add-icon">+</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- Bottom Buttons -->
		<view class="bottom-actions">
			<view class="action-btn save-btn" @click="saveForRelease">
				Save for release
			</view>
			<view class="action-btn submit-btn" @click="submitReplacement">
				Submit
			</view>
		</view>
		
		<!-- Date Picker Modal -->
		<view class="modal-mask" v-if="showDateModal" @click="closeDatePicker"></view>
		<view class="date-picker-modal" :class="{ 'modal-show': showDateModal }">
			<view class="modal-header">
				<text>Select Date</text>
				<text class="close-modal" @click="closeDatePicker">×</text>
			</view>
			<view class="modal-content">
				<picker mode="date" :value="selectedDate" @change="onDateChange" fields="day">
					<view class="picker-view">Please select a date</view>
				</picker>
			</view>
			<view class="modal-footer">
				<button class="modal-btn confirm-btn" @click="confirmDateSelection">Confirm</button>
			</view>
		</view>
		
		<!-- Type Picker Bottom Sheet -->
		<view class="shift-picker-mask" v-if="showTypeModal" @click="closeTypePicker"></view>
		<view class="shift-picker-popup" :class="{ 'shift-picker-popup-show': showTypeModal }">
			<view class="pill-indicator"></view>
			<view class="shift-picker-header">
				<text>请选择班次</text>
				<text class="shift-picker-close" @click="closeTypePicker">×</text>
			</view>
			
			<view class="shift-options">
				<view class="shift-option" :class="{'shift-option-selected': selectedType === '上班-迟到(09:54)'}" @click="selectAndConfirmType('上班-迟到(09:54)')">
					<view class="shift-detail">
						<view class="shift-title">上班-迟到(09:54)</view>
						<view class="shift-subtitle">应09:00上班</view>
					</view>
					<view class="shift-check" v-if="selectedType === '上班-迟到(09:54)'">
						<image src="/static/uniapp/sure.png" mode="aspectFit"></image>
					</view>
				</view>
				
				<view class="shift-option" :class="{'shift-option-selected': selectedType === '下班-早退(17:30)'}" @click="selectAndConfirmType('下班-早退(17:30)')">
					<view class="shift-detail">
						<view class="shift-title">下班-缺卡(17:30)</view>
						<view class="shift-subtitle">应18:00下班</view>
					</view>
					<view class="shift-check" v-if="selectedType === '下班-缺卡(17:30)'">
						<image src="/static/uniapp/sure.png" mode="aspectFit"></image>
					</view>
				</view>
				
				
			</view>

			<view class="safe-area-inset"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedDate: '2025-03-18', // Default date as shown in image
				selectedType: '上班-迟到(09:54)', // Updated default type
				reason: '',
				uploadedImages: [],
				approvers: [{
					name: 'Ms. Suer'
				}, {
					name: 'Ms. Suer'
				}],
				
				// Modal controls
				showDateModal: false,
				showTypeModal: false,
				
				// Type options - Replaced with shift options
				typeOptions: [
					'Forget to punch in',
					'Forget to punch out',
					'Device error',
					'Other reasons'
				],
				
				// Temporary selections
				tempDate: '',
				tempType: ''
			}
		},
		methods: {
			// Date picker functions
			showDatePicker() {
				this.tempDate = this.selectedDate;
				this.showDateModal = true;
			},
			closeDatePicker() {
				this.showDateModal = false;
			},
			onDateChange(e) {
				this.tempDate = e.detail.value;
			},
			confirmDateSelection() {
				if (this.tempDate) {
					this.selectedDate = this.tempDate;
				}
				this.showDateModal = false;
			},
			
			// Type picker functions
			showTypePicker() {
				this.tempType = this.selectedType;
				this.showTypeModal = true;
			},
			closeTypePicker() {
				this.showTypeModal = false;
			},
			onTypeChange(e) {
				this.tempType = e.detail.value;
			},
			confirmTypeSelection() {
				if (this.tempType) {
					this.selectedType = this.tempType;
				}
				this.showTypeModal = false;
			},
			selectAndConfirmType(type) {
				this.selectedType = type;
				this.showTypeModal = false;
			},
			
			// Image functions
			chooseImage() {
				if (this.uploadedImages.length >= 9) {
					uni.showToast({
						title: 'Maximum 9 images allowed',
						icon: 'none'
					});
					return;
				}
				
				uni.chooseImage({
					count: 9 - this.uploadedImages.length,
					success: (res) => {
						this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths];
					}
				});
			},
			deleteImage(index) {
				this.uploadedImages.splice(index, 1);
			},
			
			// Approver functions
			addApprover() {
				// In a real app, this would open an approver picker
				uni.showToast({
					title: 'Add approver functionality',
					icon: 'none'
				});
			},
			
			// Submit functions
			saveForRelease() {
				uni.showToast({
					title: 'Saved as draft',
					icon: 'success'
				});
			},
			submitReplacement() {
				// Validate form
				if (!this.selectedDate) {
					uni.showToast({
						title: 'Please select a date',
						icon: 'none'
					});
					return;
				}
				
				if (!this.selectedType) {
					uni.showToast({
						title: 'Please select a type',
						icon: 'none'
					});
					return;
				}
				
				if (!this.reason.trim()) {
					uni.showToast({
						title: 'Please enter a reason',
						icon: 'none'
					});
					return;
				}
				
				// Submit logic
				uni.showLoading({
					title: 'Submitting...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: 'Submitted successfully',
						icon: 'success'
					});
					
					// Navigate back after successful submission
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 1000);
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	
	.timecard-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	
	/* Form Styles */
	.form-container {
		flex: 1;
		padding: 30rpx;
	}
	
	.form-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-item {
		margin-bottom: 40rpx;
	}
	
	.form-label {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.required:before {
		content: "* ";
		color: #ff5252;
	}
	
	.form-input-container {
		border: 1rpx solid #e0e0e0;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.selector {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		height: 80rpx;
	}
	
	.selector-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.selector-icon image {
		width: 100%;
		height: 100%;
	}
	
	.selector-text {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}
	
	.selector-arrow {
		width: 40rpx;
		height: 40rpx;
	}
	
	.selector-arrow image {
		width: 100%;
		height: 100%;
		opacity: 0.6;
	}
	
	.reason-input {
		width: 100%;
		height: 200rpx;
		padding: 20rpx;
		font-size: 32rpx;
		box-sizing: border-box;
	}
	
	/* Form Label with Note */
	.form-label-with-note {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.note-text {
		font-size: 26rpx;
		color: #ff5252;
	}
	
	/* Image Uploader */
	.image-uploader {
		display: flex;
		flex-wrap: wrap;
	}
	
	.upload-box {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx dashed #ccc;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.upload-icon {
		font-size: 60rpx;
		color: #ccc;
	}
	
	.image-preview {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.image-preview image {
		width: 100%;
		height: 100%;
	}
	
	.delete-image {
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
	}
	
	/* Approver Timeline */
	.approver-timeline {
		position: relative;
		padding-left: 30rpx;
	}
	
	.approver-timeline:before {
		content: '';
		position: absolute;
		left: 10rpx;
		top: 0;
		bottom: 0;
		width: 2rpx;
		background-color: #19B36E;
	}
	
	.approver-item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		position: relative;
	}
	
	.timeline-dot {
		position: absolute;
		left: -30rpx;
		width: 20rpx;
		height: 20rpx;
		background-color: #19B36E;
		border-radius: 50%;
	}
	
	.approver-tag {
		background-color: #19B36E;
		color: white;
		padding: 15rpx 30rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
	}
	
	.approver-close {
		margin-left: 20rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}
	
	.add-approver {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f9f9f9;
	}
	
	.add-icon {
		font-size: 40rpx;
		color: #ccc;
	}
	
	/* Bottom Actions */
	.bottom-actions {
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.action-btn {
		flex: 1;
		height: 90rpx;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
	}
	
	.save-btn {
		margin-right: 20rpx;
		border: 1rpx solid #19B36E;
		color: #19B36E;
	}
	
	.submit-btn {
		background-color: #19B36E;
		color: #fff;
	}
	
	/* Modal Styles */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}
	
	.date-picker-modal, .type-picker-modal {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.9);
		width: 600rpx;
		background-color: #fff;
		border-radius: 16rpx;
		z-index: 1000;
		overflow: hidden;
		opacity: 0;
		transition: all 0.3s;
	}
	
	.modal-show {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	
	.modal-header {
		padding: 30rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: 500;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}
	
	.close-modal {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 40rpx;
		color: #999;
	}
	
	.modal-content {
		padding: 40rpx 30rpx;
	}
	
	.picker-view {
		text-align: center;
		padding: 20rpx;
		color: #666;
	}
	
	.type-option {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.type-option text {
		margin-left: 20rpx;
	}
	
	.modal-footer {
		padding: 20rpx 30rpx 40rpx;
	}
	
	.modal-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 32rpx;
	}
	
	.confirm-btn {
		background-color: #19B36E;
		color: #fff;
	}
	
	/* Type Picker Bottom Sheet */
	.shift-picker-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		opacity: 0;
		transition: opacity 0.3s;
	}
	
	.shift-picker-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 1000;
		transform: translateY(100%);
		transition: transform 0.3s ease-out;
		padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
		padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
	}
	
	.pill-indicator {
		width: 70rpx;
		height: 6rpx;
		background-color: #000;
		opacity: 0.2;
		border-radius: 3rpx;
		margin: 20rpx auto;
	}
	
	.shift-picker-popup-show {
		transform: translateY(0);
	}
	
	.shift-picker-popup-show + .shift-picker-mask {
		opacity: 1;
	}
	
	.shift-picker-header {
		padding: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
	}
	
	.shift-picker-close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 36rpx;
		color: #999;
	}
	
	.shift-options {
		padding: 20rpx 30rpx 40rpx;
	}
	
	.shift-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border: 1px solid #e5e5e5;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		transition: all 0.2s ease;
	}
	
	.shift-option:active {
		background-color: #f9f9f9;
	}
	
	.shift-option-selected {
		border: 1px solid #19B36E;
		background-color: rgba(25, 179, 110, 0.05);
	}
	
	.shift-detail {
		display: flex;
		flex-direction: column;
		padding: 10rpx 0;
	}
	
	.shift-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}
	
	.shift-subtitle {
		font-size: 26rpx;
		color: #888;
	}
	
	.shift-check {
		width: 44rpx;
		height: 44rpx;
		background-color: #19B36E;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.shift-check image {
		width: 28rpx;
		height: 28rpx;
		filter: brightness(5);
	}
	
	.safe-area-inset {
		height: env(safe-area-inset-bottom);
		background-color: #fff;
	}
</style> 